<div id="main-area">
    <div id="map">
    </div>
</div>
<style>
    .clusterBubble {
        border-radius: 50%;
        color: #fff;
        font-weight: 500;
        text-align: center;
        opacity: 0.88;
        background-image: linear-gradient(139deg, #4294FF 0%, #295BFF 100%);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.20);
        position: absolute;
        top: 0px;
        left: 0px;
    }
</style>
<script>
    require(['vue'], function (Vue) {
        var app = new Vue({
            el: '#main-area',
            data: {
                loc:{lat:'39.92300000',lng:'116.5200000000'}
            },
            created: function () {
                this.init().then((TMap) => {
                    var that  =this;
                    this.TMap =TMap;
                    var map = new TMap.Map("map", {
                        center: new TMap.LatLng(39.984104, 116.307503), //设置地图中心点坐标
                        zoom: 8, //设置地图缩放级别
                        pitch: 10,
                        // mapStyleId: 'style1'
                    });
                    // 创建点聚合
                    var markerCluster = new TMap.MarkerCluster({
                        id: 'cluster',
                        map: map,
                        enableDefaultStyle: true, // 关闭默认样式
                        minimumClusterSize: 2,
                        geometries: [
                            { // 点数组
                                position: new TMap.LatLng(39.953416, 116.480945),
                                styles: {
                                    default: new TMap.MarkerStyle({
                                        'width': 34,
                                        'height': 42,
                                        'anchor': {
                                            x: 17,
                                            y: 21,
                                        },
                                        'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_blue.png',
                                    }),
                                },
                            },
                            {
                                position: new TMap.LatLng(39.984104, 116.407503)
                            },
                            {
                                position: new TMap.LatLng(39.908802, 116.497502)
                            },
                            {
                                position: new TMap.LatLng(40.040417, 116.373514)
                            },
                            {
                                position: new TMap.LatLng(39.953416, 116.380945)
                            },
                            {
                                position: new TMap.LatLng(39.984104, 116.307503)
                            },
                            {
                                position: new TMap.LatLng(39.908802, 116.397502)
                            },
                            {
                                position: new TMap.LatLng(40.040417, 116.273514)
                            },
                            {
                                position: new TMap.LatLng(41.818664,123.443756)
                            },
                            {
                                position: new TMap.LatLng(41.760044,123.392944)
                            },
                            {
                                position: new TMap.LatLng(41.709829,123.446503)
                            },

                        ],
                        zoomOnClick: true,
                        gridSize: 60,
                        averageCenter: false
                    });
                })
            },
            methods: {
                init () {
                    const AK = "IOKBZ-TGXK4-U2TUA-FWHXN-XCUCQ-SEBOH";
                    const TMap_URL = "https://map.qq.com/api/gljs?v=1.exp&libraries=tools,service&key=" + AK + "&callback=onMapCallback";
                    return new Promise((resolve, reject) => {
                        // 如果已加载直接返回
                        if (typeof TMap !== "undefined") {
                            resolve(TMap);
                            return true;
                        }
                        // 地图异步加载回调处理
                        window.onMapCallback = function () {
                            resolve(TMap);
                        };
                        // 插入script脚本
                        let scriptNode = document.createElement("script");
                        scriptNode.setAttribute("type", "text/javascript");
                        scriptNode.setAttribute("src", TMap_URL);
                        document.body.appendChild(scriptNode);
                    });
                }
            }
        });
    });
</script>